<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6"><div style="height: 200px;background-color: #42b983"></div></el-col>
      <el-col :span="6"><div style="height: 200px;background-color: #42b983"></div></el-col>
      <el-col :span="6"><div style="height: 200px;background-color: #42b983"></div></el-col>
      <el-col :span="6"><div style="height: 200px;background-color: #42b983"></div></el-col>
    </el-row>
<div class="flex">
  <el-row :gutter="10">
    <el-col :span="12">
      <div id="chart" style="width: 600px; height: 400px" ref="chart"></div>
    </el-col>
  </el-row>
  <el-row :gutter="10">
    <el-col :span="12">
      <div id="chart1" style="width: 600px; height: 400px" ref="chart1"></div>
    </el-col>
  </el-row>

  <el-row :gutter="10">
    <el-col :span="12">
      <div id="chart2" style="width: 600px; height: 400px" ref="chart2"></div>
    </el-col>
  </el-row>
</div>
    <div>
      <baidu-map class="map" center="合肥市蜀山区" scroll-wheel-zoom>
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      </baidu-map>
    </div>
  </div>

</template>

<script>
export default {
  name: "cate.vue",
  data () {
    return {
      chart: null//图标实列
    }
  },
  methods:{
    initChart(){
      this.chart = this.$echarts.init(this.$refs.chart);
      this.chart1 = this.$echarts.init(this.$refs.chart1);
      this.chart2 = this.$echarts.init(this.$refs.chart2);
      //设置图标的配置项
      this.chart.setOption({
        title: {
          text: 'ECharts'//标题
        },
        tooltip: {},//鼠标移入数据项提示文本
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']//x轴
        },
        yAxis: {},
        backgroundColor:'pink',//背景颜色
        // color:[]//里面眼神设置
        series: [
          {
            name: '销量',
            type: 'bar',//柱状图
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
      this.chart1.setOption({
        title: {
          text: 'ECharts'//标题
        },
        tooltip: {},//鼠标移入数据项提示文本
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']//x轴
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'line',//柱状图
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
      this.chart2.setOption({
        title: {
          text: 'ECharts'//标题
        },
        tooltip: {},//鼠标移入数据项提示文本
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']//x轴
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'pie',//柱状图
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });


    }
  },
  mounted () {
    //在这里初始化
    this.initChart()

  }
}
</script>

<style lang="scss" scoped>
.flex{
  display: flex;
  justify-content: space-between;
}
.map{
  height: 300px;
}
</style>

